<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>专题图网格</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
    <style>
        .icon {
            display: inline-block;
            text-align: center;
            color: #fff;
            width: 60px;
            height: 20px;
            margin: 0 10px;
            text-shadow: -1px 0 0 #333, 1px 0 0 #333, 0 1px 0 #333, 0 -1px 0 #333
        }
    </style>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onStartDraw()">开始框选(默认矩形)</button>
    <button onclick="onEndDraw()">停止框选</button>

    <br>
    <button onclick="onStartSnap()">开始捕捉</button>
    <button onclick="onEndSnap()">停止捕捉</button>
    图例:
    <div class="icon" style="background:#ff0000">端子</div>
    <div class="icon" style="background:#00ff00">线</div>
    <div class="icon" style="background:#0000ff">点</div>
    <div class="icon" style="background:#ffff00">网格线</div>
    <div class="icon" style="background:#ff00ff">网格点</div>
    <br>
    改变网格单元格尺寸
    <input type="range" value="1" max="5" min="0.5" step="0.1" onchange="redrawGrid()">
</div>
</body>
</html>

<script>
    mapOptions = {
        zoom: 20,
        center: [118.19032804148651, 24.478426264353757]
    }
    //矢量栅格参数（专题图参数）
    gridLayerOptions = {
        mapid: '3001_300000_74993',//图实例id
        maptype: '3001',//图类型
        displayfilter: '',
        disschema: 2,
    }


    selectToolOptions = {
        type: 'rectangle',
        borderFillStyle: 'rgba(56,135,190,0.1)',//框选的填充色
        borderStyle: '2px solid #ff0000',//框选的边框样式
        // layers: ['301000']//打开此选项，可以过滤被选中的目标图层
        selectedColor: '#ff00ff',
        isAddOn: false,
        cursorStyle: 'move',
    }

    snapToolOptions = {
        types: ['cellPoint', 'cellLine', 'point', 'line', 'terminal'],//捕捉的类型(全部)
        // types: ['point', 'line', 'terminal'],//捕捉的类型(不含网格)
        priority: ['cellPoint', 'cellLine', 'terminal', 'point', 'line']//捕捉的优先级
    }

    function redrawGrid() {
        let size = Number(event.target.value)
        console.log(size)
        cellLayer.setCellSize(size)
        // map.fire('moveend')
    }

    function onStartDraw() {
        snapTool.disable()
        //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
        selectTool.enable()
    }

    //关闭框选工具
    function onEndDraw() {
        selectTool.disable(true)
    }

    //开启捕捉工具
    function onStartSnap() {
        selectTool.disable(true)
        snapTool.enable()
    }

    //关闭捕捉工具
    function onEndSnap() {
        snapTool.disable()
    }

    function initPage() {
        initSelectTool()
        initSnapTool()
        initCellLayer()
        snapTool.addGridCell(cellLayer)
        map.egis.selectionSet.setFillOpacity(0)

        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()
        // snapTool.removeGridCell(cellLayer)//从捕捉工具中移除指定的网格数据源
        // snapTool.clearGridCell()//移除所有捕捉工具中添加的网格数据源
        //填充透明度这里可以设置，填充色与选择集的选中颜色一致

    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
